<template>
	<view>
		<!-- <image mode="widthFix" class="common-bg-img" src="/static/header-bg.png"></image> -->
		<view class="common-header" :style="{paddingTop: sbh + 'px'}">
			<view class="header-inner">
				<view v-if="scan" class="back-btn left-btn" style="margin-left: 20rpx;" @click="scanHandle">
					<uni-icons type="scan"></uni-icons>
				</view>
				<view v-if="location" class="back-btn left-btn" style="margin-left: 20rpx;width: auto;font-size: 24rpx;color: #333333;" @click="locationHandle">
					<image :src="(imgUrl+'/wx/location.png')" style="width: 50rpx; height: 50rpx;"></image>
					清远科德汇
				</view>
				<view v-if="back" @click="goBack" class="back-btn left-btn"><image mode="widthFix" :src="(imgUrl+'/wx/back.png')"></image></view>
				<view class="header-title">{{title}}</view>

			<!-- <view v-if="back" class="back-btn"></view> -->
			</view>
		</view>
		<view class="zw" :style="{paddingTop: sbh + 'px'}"></view>
	</view>
</template>

<script>
	let statusBarHeight = 0
	export default {
		name:"xk-header",
		props:{
			title: String,
			headerbg: {
				type: Boolean,
				default: false
			},
			back: {
				type: Boolean,
				default: true
			},
			scan: {
				type: Boolean,
				default: false
			},
			location: {
				type: Boolean,
				default: false
			},
			backFunc: Function
		},
		data() {
			return {
				sbh: 25,
				imgUrl:this.$config.BASE_imgUrl,
			};
		},
		created(){
			if(statusBarHeight == 0){
				uni.getSystemInfo({
					success: (res)=>{
						statusBarHeight = res.statusBarHeight;
						this.sbh = statusBarHeight
					}
				})
			}else{
				this.sbh = statusBarHeight
			}

		},
		methods:{
			locationHandle(){
				this.$util.openLocation()
			},
			goBack(){
				if(this.backFunc){
					this.backFunc()
				}else{
					uni.navigateBack()
				}
			},
			scanHandle(){
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						// resolve(res)
						this.$emit('scanHandle', res)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.zw{
	height: 88rpx;
	// padding-bottom: 20rpx;
}
.common-bg-img{
	position: absolute;
	top:0;
	width: 750rpx;
}
.common-header{
	height: 88rpx;
	background-color: #FFFFFF;
	padding-top: var(--status-bar-height);
	// padding-bottom: 20rpx;
	width: 750rpx;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	.header-inner{
		display: flex;
		align-items: center;
		width: 100vw;
	}
	.header-title{
		flex: 1;
		text-align: center;
	}
	.right-btn{
		right:0
	}
	.left-btn{
		left:0;
	}
	.back-btn{
		position: absolute;
		z-index: 9999;
		height: 74rpx;
		width: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 0 20rpx;
		image{
			width: 60rpx;
			margin-left: 14rpx;
		}
		.uni-icons{
			font-size: 50rpx !important;
			color: #333333 !important;
		}
		uni-icons{
			text{
				font-size: 50rpx !important;
				color: #333333 !important;
			}

		}
	}
}
.header-bg{
	background-color: #FFFFFF;
}
</style>
